<template>
{{orderId}}
  <el-table :data="tableData" style="width: 50%">
    <el-table-column prop="foodName" label="商品名" width="180" />
    <el-table-column prop="price" label="价格" width="180" />
    <el-table-column prop="discount" label="折扣" width="180" />
    <el-table-column prop="totalPrice" label="小计" />
  </el-table>
  <el-button type="primary" round @click="pay">支付</el-button>
</template>
<script setup>
import {useRoute} from "vue-router";
import {ref,onMounted} from 'vue'
import {findOrderByOrderId,pay as payApi} from "../api/food.js";
import {ElMessage} from "element-plus";
const router = useRoute()
const  orderId = ref(router.query.orderId)
const tableData = ref([])

async function findOrder(){
  let {data:data} = await findOrderByOrderId(orderId.value)
  console.log(data)
  tableData.value = data.data.foodItemList
}
async function pay(){
  let {data:data} = await payApi(orderId.value)
  ElMessage.info(data.msg)
}

onMounted(()=>{
  findOrder()
})
</script>


<style scoped>

</style>